<script lang="ts" setup>
import { FormOptions } from '@/components/form/types/types';
import { toModel } from '@/components/form/utils';
import { ElMessage } from 'element-plus';
import { FormInstance } from 'element-plus/lib/components';
import { ref } from 'vue';

interface Scope {
  form: FormInstance;
}

const options: FormOptions[] = [
  {
    type: 'input',
    value: '',
    label: '用户名',
    prop: 'username',
    rules: [
      {
        required: true,
        message: '用户名不能为空',
        trigger: 'change',
      },
      {
        min: 2,
        max: 6,
        message: '用户名必须2-6位',
        trigger: 'change',
      },
    ],
  },
  {
    type: 'input',
    value: '',
    label: '密码',
    prop: 'password',
    attrs: {
      showPassword: true,
    },
    rules: [
      {
        required: true,
        message: '密码不能为空',
        trigger: 'blur',
      },
      {
        min: 6,
        max: 16,
        message: '密码必须6~16位',
        trigger: 'blur',
      },
    ],
  },
  {
    type: 'select',
    value: 1,
    label: '班级',
    prop: 'classNum',
    attrs: {
      style: {
        width: '100%',
      },
    },
    rules: [
      {
        required: true,
        message: '班级不能为空',
        trigger: 'blur',
      },
    ],
    children: [
      {
        type: 'option',
        label: '1班',
        value: 1,
      },
      {
        type: 'option',
        label: '2班',
        value: 2,
      },
      {
        type: 'option',
        label: '三班',
        value: 3,
      },
    ],
  },
  {
    type: 'upload',
    label: '文件',
    prop: 'pic',
    uploadAttrs: {
      action: 'https://jsonplaceholder.typicode.com/posts/',
      multiple: true,
      limit: 3,
    },
    uploadHooks: {
      onSuccess: (response) => {
        window.console.log(response);
      },
      beforeUpload: () => {
        window.console.log(666);
      },
    },
  },
  {
    type: 'editor',
    value: '',
    label: '编辑器',
    prop: 'edit',
    rules: [
      {
        required: true,
        message: '班级不能为空',
        trigger: 'blur',
      },
    ],
  },
];

const defaultModel = toModel(options);
const model = ref<typeof defaultModel>(defaultModel);

const form = ref();

const handleSubmit = (scope: Scope) => {
  scope.form.validate((valid) => {
    if (valid) {
      window.console.log(model.value);
      ElMessage.success('提交成功');
    } else {
      ElMessage.error('表单填写有误,请检查');
    }
  });
};

const handleReset = () => {
  form.value.resetFields();
};
</script>

<template>
  <mn-form ref="form" v-model:value="model" :options="options" :label-width="100">
    <template #uploadArea>
      <el-button type="primary" size="small">上传文件</el-button>
    </template>
    <template #uploadTip>
      <div>滚你妈的</div>
    </template>
    <template #action="scope">
      <el-button type="primary" @click="handleSubmit(scope)">提交</el-button>
      <el-button type="primary" @click="handleReset()">重置</el-button>
    </template>
  </mn-form>
</template>

<style lang="scss" scoped></style>
